<template>
  <div class="container">
    <a-space direction="vertical" fill>
      <a-page-header title="GSS Quotation" subtitle="">
        <template #extra> </template>
      </a-page-header>

      <a-card
        title="Enter site address and connectivity requirements to receive a customized quotation."
        style="width: 1200px; margin: 0 auto"
      >
        <a-form ref="formRef" :model="orderProduct" auto-label-width layout="vertical" @submit="handleOrderAdd">
          <a-row :gutter="24" justify="start">
            <a-col :span="24">
              <a-form-item
                field="productType"
                validate-trigger="input"
                :rules="[{ required: true, message: 'please select product type' }]"
                label="Product Type"
              >
                <a-cascader
                  :model="orderProduct.productType"
                  style="width: 700px"
                  :options="productTypeOptions"
                  placeholder="Please select product type..."
                  allow-clear
                  @change="handleProductTypeChange"
                />
              </a-form-item>
            </a-col>
            <a-col :span="24">
              <a-form-item
                field="siteAddress"
                validate-trigger="input"
                :rules="[{ required: true, message: 'product is required' }]"
                label="Site Address"
              >
                <a-select
                  v-model="orderProduct.siteAddress"
                  style="width: 700px"
                  allow-clear
                  allow-search
                  :placeholder="placeholder"
                  :filter-option="false"
                  :loading="loading"
                  :options="placesList"
                  :field-names="{ value: 'id', label: 'displayName.text' }"
                  @search="handleAddressSearch"
                  @change="handleAddressChange"
                >
                  <template #label="{ data }">
                    <div v-if="selectedPlace">
                      <div class="name-text">{{ selectedPlace.displayName?.text }}</div>
                      <div class="address-text"> <icon-link /> {{ selectedPlace.formattedAddress }} </div>
                    </div>
                    <span v-else>{{ data?.label }}</span>
                  </template>
                  <template #option="{ data }">
                    <div class="option-content">
                      <div class="name-text">{{ data.displayName?.text }}</div>
                      <div class="address-text"> <icon-link /> {{ data.formattedAddress }} </div>
                    </div>
                  </template>
                </a-select>
              </a-form-item>
            </a-col>
            <a-col :span="8">
              <a-form-item
                field="productId"
                validate-trigger="input"
                :rules="[{ required: true, message: 'product is required' }]"
                label="Bandwidth"
              >
                <a-cascader
                  v-model="orderProduct.productId"
                  style="width: 300px"
                  :options="productOptions"
                  placeholder="Please select product..."
                  allow-clear
                  @change="handleProductChange"
                />
              </a-form-item>
            </a-col>
            <a-col :span="16">
              <a-form-item label="LMP">
                {{ orderProduct.carrierType || 'None' }}
              </a-form-item>
            </a-col>
            <a-col :span="8">
              <a-form-item field="ipRent" label="Additional IP">
                <a-radio-group
                  v-if="product?.ip29MonthlyRent || product?.ip30MonthlyRent"
                  v-model="orderProduct.ipRent"
                  @change="handleIpChange"
                >
                  <a-radio v-if="product?.ip29MonthlyRent" :value="product?.ip29MonthlyRent">/29-IP</a-radio>
                  <a-radio v-if="product?.ip30MonthlyRent" :value="product?.ip30MonthlyRent">/30-IP</a-radio>
                </a-radio-group>
                <span v-else class="none-text">None</span>
              </a-form-item>
            </a-col>
            <a-col :span="16">
              <a-form-item label="&nbsp;">
                <template v-if="product && product.cpeMonthlyRent !== -1">
                  <a-checkbox :checked="cpeSelected" @change="handleCpeChange"> CPE </a-checkbox>
                </template>
                <template v-else> NO CPE </template>
              </a-form-item>
            </a-col>
            <a-col :span="8">
              <a-form-item field="rentalMonths" label="Terms in Months">
                <a-select v-model="orderProduct.rentalMonths" style="width: 300px">
                  <a-option v-for="n in 5" :key="n" :value="12 * n">{{ 12 * n }}</a-option>
                </a-select>
              </a-form-item>
            </a-col>
            <a-col :span="16">
              <a-form-item field="advance" label="&nbsp;">
                <a-button type="primary" @click="toggleVisibility"> ADVANCE </a-button>
              </a-form-item>
            </a-col>
            <a-row v-if="orderProduct.advance" :gutter="24" style="margin-left: 0; margin-right: 0">
              <a-col :span="10">
                <a-form-item field="sla">
                  <a-checkbox-group @change="handleSlaChange">
                    <a-checkbox :checked="orderProduct?.sla !== ''" value="99.99%"> SLA </a-checkbox>
                  </a-checkbox-group>
                </a-form-item>
              </a-col>
              <a-col :span="14">
                <a-form-item field="mttr">
                  <a-checkbox-group @change="handleMttrChange">
                    <a-checkbox :checked="orderProduct?.mttr !== ''" value="4"> MTTR </a-checkbox>
                  </a-checkbox-group>
                </a-form-item>
              </a-col>
              <a-col :span="10">
                <a-form-item field="interface">
                  <a-checkbox-group @change="handleInterfaceChange">
                    <a-checkbox :checked="orderProduct?.interfaceType !== ''" value="100Base-TX(RJ45)">
                      Interface
                    </a-checkbox>
                  </a-checkbox-group>
                </a-form-item>
              </a-col>
              <a-col :span="14">
                <a-form-item field="leadTime">
                  <a-checkbox-group @change="handleLeadTimeChange">
                    <a-checkbox :checked="orderProduct?.leadTime !== 0" :value="4"> Lead Time </a-checkbox>
                  </a-checkbox-group>
                </a-form-item>
              </a-col>
              <a-col :span="10">
                <a-form-item field="lastMileTechnology" label="&nbsp;">
                  <a-checkbox-group @change="handleLastMileTechnologyChange">
                    <a-checkbox :checked="orderProduct?.lastMileTechnology !== ''" value="Fiber">
                      Last Mile Technology
                    </a-checkbox>
                  </a-checkbox-group>
                </a-form-item>
              </a-col>
              <a-col :span="14">
                <a-form-item field="quoteSubtype" label="Quote Subtype">
                  <a-select v-model="orderProduct.quoteSubtype" default-value="Firm" allow-clear style="width: 300px">
                    <a-option value="Firm">Firm</a-option>
                    <a-option value="Budgetary">Budgetary</a-option>
                    <a-option value="No Preference">No Preference</a-option>
                  </a-select>
                </a-form-item>
              </a-col>
            </a-row>
            <a-col :span="24">
              <a-form-item field="remark" label="Remark">
                <a-textarea
                  v-model="orderProduct.remark"
                  placeholder="input remark"
                  style="width: 700px; min-height: 80px"
                />
              </a-form-item>
            </a-col>
            <a-form-item style="padding-left: 12px">
              <a-button html-type="submit" type="primary" shape="round" :disabled="!orderProduct.productId">
                Quick Quote
              </a-button>
            </a-form-item>
          </a-row>
          <div>Add more requests above after your quick quote.</div>
        </a-form>
      </a-card>

      <a-card title="Quote Summary" style="width: 1200px; margin: 40px auto">
        <a-tabs v-if="orderProductList" type="card-gutter" size="large">
          <a-space direction="vertical">
            <div
              v-for="(record, index) in orderProductList"
              :key="index"
              style="position: relative; border-bottom: 1px solid rgb(229, 230, 235)"
            >
              <a-row :gutter="24">
                <a-col :span="2">
                  <div
                    style="
                      text-align: center;
                      line-height: 200px;
                      vertical-align: middle;
                      font-size: 18px;
                      font-weight: bold;
                    "
                  >
                    <span class="number"> {{ index + 1 }} </span>
                  </div>
                </a-col>
                <a-col :span="22">
                  <div class="wrapper">
                    <div class="wrapper_box">
                      <div class="name-text">{{ record.siteName }}</div>
                      <div class="address-text"> <icon-link /> {{ record.siteAddress }} </div>
                      <div style="margin-top: 10px">
                        <a-descriptions-item>
                          <a-descriptions
                            :column="3"
                            layout="horizontal"
                            table-layout="fixed"
                            :align="{ label: 'right' }"
                            :label-style="{ width: '160px' }"
                          >
                            <a-descriptions-item label="Product">{{ record.productType }}</a-descriptions-item>
                            <a-descriptions-item label="LMP">{{ record.carrierType }}</a-descriptions-item>
                            <a-descriptions-item label="Bandwidth">{{ record.bandwidth }}</a-descriptions-item>
                            <a-descriptions-item label="MRC (USD)">
                              {{ formatCurrency(record.broadbandRent + (record.cpeRent === -1 ? 0 : record.cpeRent)) }}
                            </a-descriptions-item>
                            <a-descriptions-item label="NRC (USD)">
                              {{ formatCurrency(record.nrc) }}
                            </a-descriptions-item>
                            <a-descriptions-item label="CPE">
                              {{ record.cpeRent !== -1 ? 'YES' : 'NO' }}
                            </a-descriptions-item>
                            <a-descriptions-item label="Additional LAN IP">
                              {{ record.ipType || 'NO' }}
                            </a-descriptions-item>
                            <a-descriptions-item label="Additional IP MRC">
                              {{ formatCurrency(record.ipRent) || 'None' }}
                            </a-descriptions-item>
                            <template v-if="record.advance">
                              <a-descriptions-item label="MTTR">
                                {{ record.mttr || 'None' }}
                              </a-descriptions-item>
                              <a-descriptions-item label="Interface">
                                {{ record.interfaceType || 'None' }}
                              </a-descriptions-item>
                              <a-descriptions-item label="Last Mile Technology">
                                {{ record.lastMileTechnology || 'None' }}
                              </a-descriptions-item>
                              <a-descriptions-item label="Lead Time">
                                {{ record.leadTime || 'None' }}
                              </a-descriptions-item>
                              <a-descriptions-item label="Quote Subtype">
                                {{ record.quoteSubtype || 'None' }}
                              </a-descriptions-item>
                            </template>
                            <a-descriptions-item label="Terms (Months)">
                              {{ record.rentalMonths }}
                            </a-descriptions-item>
                            <a-descriptions-item label="Total MRC">
                              {{
                                formatCurrency(
                                  record.broadbandRent + (record.cpeRent === -1 ? 0 : record.cpeRent) + record.ipRent,
                                )
                              }}
                            </a-descriptions-item>
                            <a-descriptions-item label="Total NRC">
                              {{ formatCurrency(record.nrc) }}
                            </a-descriptions-item>
                            <a-descriptions-item label="Remark">{{ record.remark }}</a-descriptions-item>
                          </a-descriptions>
                        </a-descriptions-item>
                      </div>
                    </div>
                  </div>
                  <a-button
                    type="secondary"
                    class="btn"
                    style="position: absolute; right: 0; top: 40%"
                    @click="removeOrder(record, index)"
                  >
                    <template #icon>
                      <icon-delete size="large" />
                    </template>
                  </a-button>
                </a-col>
              </a-row>
            </div>
            <div style="text-align: center; line-height: 60px">
              <a-button
                type="primary"
                :disabled="orderProductList.length === 0"
                :loading="orderTable.loading"
                @click="handleOrderSave"
              >
                View Full Quote
              </a-button>
            </div>
          </a-space>
        </a-tabs>
        <a-empty v-else>
          <template #image>
            <icon-exclamation-circle-fill />
          </template>
          No data, Enter your site address and internet requirements to browse from thousands of vendors globally.
        </a-empty>
      </a-card>
    </a-space>

    <a-modal
      v-model:visible="modal.visible"
      unmount-on-close
      modal-class="self-model"
      :on-before-ok="handleModalOk"
      @cancel="handleOrderCancel"
    >
      <template #title> Customer Login </template>
      <LoginForm
        ref="loginFormRef"
        :visible="modal.visible"
        @login-success="handleLoginSuccess"
        @login-failed="handleLoginFailed"
      />
    </a-modal>
  </div>
</template>

<script setup lang="ts">
  import { ref, computed, reactive, VNodeRef, onMounted } from 'vue';
  import { useRouter } from 'vue-router';
  import { useUserStore, useOrderStore } from '@/store/';
  import useLoading from '@/hooks/loading';
  import type { PageQuery } from '@/api/types';
  import type { SelectOption } from '@/types/global';
  import { Order, OrderProduct, saveOrder } from '@/api/order-api'; // 导入接口
  import { findMaxLevelProduct, Product } from '@/api/product-api'; // 导入接口
  import { findComponents, GooglePlace, placesSearch } from '@/api/map-api'; // 导入接口
  import { Message } from '@arco-design/web-vue'; // 导入选项数据类型
  import LoginForm from '@/components/login-form/index.vue';

  const router = useRouter();
  // 响应式数据
  const language = ref('en'); // 当前语言
  const formRef = ref<VNodeRef | null>(null);
  const cpeSelected = ref<boolean>(false);
  const productTypeOptions = reactive<SelectOption[]>([
    {
      label: 'Global Internet Access',
      value: 'Global Internet Access',
      children: [
        { label: 'Standard DIA', value: 'Standard DIA' },
        { label: 'Premium DIA', value: 'Premium DIA' },
      ],
    },
    {
      label: 'Point-To-Point Connectivity',
      value: 'Point-To-Point Connectivity',
      disabled: true,
      children: [
        { label: 'IEPL', value: 'IEPL' },
        { label: 'MetroConnect', value: 'MetroConnect' },
      ],
    },
    {
      label: 'Cloud and DC Interconnect',
      value: 'Cloud and DC Interconnect',
      disabled: true,
    },
  ]);
  const placesId = ref(''); // 选中的地址ID
  const placesList = ref<GooglePlace[]>([]); // 搜索结果列表
  const productList = ref<Product[]>([]);
  const productOptions = computed(() => {
    if (!productList.value.length) {
      return [];
    }
    // 一级：按 bandwidth 分组
    const bwMap = productList.value.reduce<Record<string, Product[]>>((acc, cur) => {
      if (!cur.bandwidth) return acc;
      acc[cur.bandwidth] ??= [];
      acc[cur.bandwidth].push(cur);
      return acc;
    }, {});

    // 二级：在每个 bandwidth 下挂 carrierType
    return Object.entries(bwMap).map(([bw, list]) => ({
      label: bw,
      value: bw,
      children: Array.isArray(list) ? list.map((p) => ({ label: p.carrierType, value: p.id })) : [],
    }));
  });
  const product = ref<Product>(null);
  const orderProduct = ref<OrderProduct>({
    siteAddress: undefined,
  });
  const networkType = computed<string>(() => {
    const type = orderProduct.value.productType;
    if (!type) {
      return null;
    }
    const item = productTypeOptions.find((option) => {
      return option.value === type || (option.children?.some((child) => child.value === type) ?? false);
    });

    return String(item?.value) || null; // 允许返回null
  });
  const orderProductList = ref<OrderProduct[]>([]);
  const orderStore = useOrderStore();
  onMounted(() => {
    orderProductList.value = [...orderStore.orders]; // 拷贝一份，避免共享引用
  });

  // 计算属性：获取当前选中的地址完整数据
  const selectedPlace = computed(() => {
    if (!placesId.value) {
      return null;
    }
    return placesList.value.find((place) => place.id === placesId.value);
  });
  // 加载状态
  const { loading, setLoading } = useLoading(false);
  const handleCpeChange = (checked: boolean) => {
    orderProduct.value.cpeRent = checked ? product.value.cpeMonthlyRent : 0 || 0;
  };
  const handleSlaChange = (checked: boolean) => {
    if (product.value) {
      orderProduct.value.sla = checked ? product.value.sla : null;
    }
  };
  const handleMttrChange = (checked: boolean) => {
    if (product.value) {
      orderProduct.value.mttr = checked ? '4' : null;
    }
  };
  const handleInterfaceChange = (checked: boolean) => {
    if (product.value) {
      orderProduct.value.interfaceType = checked ? '1000Base-T(RJ45)' : null;
    }
  };
  const handleLeadTimeChange = (checked: boolean) => {
    if (product.value) {
      orderProduct.value.leadTime = checked ? 4 : null;
    }
  };
  const handleLastMileTechnologyChange = (checked: boolean) => {
    if (product.value) {
      orderProduct.value.lastMileTechnology = checked ? 'Fiber' : null;
    }
  };
  const orderTable = reactive({
    border: true,
    hover: true,
    stripe: true,
    checkbox: true,
    loading: false,
  });
  const placeholder = computed(() => {
    return language.value === 'zh' ? '请输入搜索内容...' : 'Please enter search content...';
  });

  const formatCurrency = (num: number) => {
    if (num) {
      return num.toLocaleString('en-US', {
        style: 'currency',
        currency: 'USD',
        minimumFractionDigits: 2,
        maximumFractionDigits: 2,
      });
    }
    return '';
  };

  const fetchPlaces = async (lang: string, keyword: string) => {
    if (!keyword.trim()) {
      return;
    }
    placesList.value = [];
    try {
      setLoading(true);
      const { places = [] } = await placesSearch(keyword, lang);
      placesList.value = places;
    } catch (error) {
      Message.error({ content: error || 'Error', duration: 5 * 1000 });
      placesList.value = [];
    } finally {
      setLoading(false);
    }
  };

  const fetchProduct = async (query: PageQuery) => {
    if (!query || !query.city) {
      return;
    }
    productList.value = [];
    try {
      loading.value = true;
      query.city = query.city.replace("'", '').trim();
      const { result = [] } = await findMaxLevelProduct(query);
      productList.value = result;
    } catch (error) {
      Message.error({ content: error || 'Error', duration: 5 * 1000 });
    } finally {
      loading.value = false;
    }
  };

  // 输入搜索触发提示
  const handleAddressSearch = (value: string) => {
    formRef.value?.validateField('productType').then((res) => {
      if (res) {
        return;
      }
      // 防抖处理，避免频繁请求
      const searchTimer = setTimeout(() => {
        fetchPlaces(language.value, value);
        clearTimeout(searchTimer);
      }, 500);
    });
  };

  const handleProductTypeChange = (value: string) => {
    orderProduct.value.productType = value;
    orderProduct.value.networkType = networkType.value;
  };

  const fixNumber = (value: number) => {
    return value.toFixed(6);
  };

  const handleAddressChange = (selectedId: string) => {
    placesId.value = selectedId;
    const place = placesList.value.find((e) => e.id === selectedId);
    if (place) {
      productList.value = [];
      let city = findComponents(place, ['locality', 'political']);
      if (!city) {
        city = findComponents(place, ['administrative_area_level_1', 'political']);
      }
      const county = findComponents(place, ['sublocality_level_1', 'political']);
      const address = place.formattedAddress;
      orderProduct.value.siteCityName = city;
      orderProduct.value.siteLocation = `${fixNumber(place.location.longitude)},${fixNumber(place.location.latitude)}`;
      orderProduct.value.siteName = place.displayName.text;
      orderProduct.value.siteAddress = address;
      orderProduct.value.networkType = networkType.value;
      const query: PageQuery = {
        city,
        county,
        address,
        networkType: orderProduct.value.networkType,
        productType: orderProduct.value.productType,
      };
      // query.networkType = networkType;
      fetchProduct(query);
    }
  };
  const handleProductChange = (productId: number) => {
    if (productId) {
      product.value = productList.value.find((item) => item.id === productId);
      if (product.value) {
        orderProduct.value.productId = product.value.id;
        orderProduct.value.carrierType = product.value.carrierType;
        orderProduct.value.productType = product.value.productType;
        orderProduct.value.bandwidth = product.value.bandwidth;
        orderProduct.value.broadbandRent = product.value.monthlyRent;
        orderProduct.value.freeIp = product.value.freeIp;
        orderProduct.value.nrc = product.value.nrc;
        orderProduct.value.ipRent = 0;
        orderProduct.value.cpeRent = -1;
        orderProduct.value.mttr = null;
        orderProduct.value.interfaceType = null;
        orderProduct.value.sla = null;
        orderProduct.value.lastMileTechnology = null;
        orderProduct.value.leadTime = null;
        orderProduct.value.quoteSubtype = null;
        orderProduct.value.rentalMonths = 12;
      }
    }
  };
  const handleIpChange = (ipRent: number) => {
    orderProduct.value.ipRent = ipRent;
    if (product.value) {
      if (ipRent === product.value.ip29MonthlyRent) {
        orderProduct.value.ipType = '/29 IP';
      } else if (ipRent === product.value.ip30MonthlyRent) {
        orderProduct.value.ipType = '/30 IP';
      } else {
        orderProduct.value.ipType = '';
      }
    } else {
      orderProduct.value.ipType = '';
    }
  };
  const handleOrderAdd = () => {
    if (!orderProduct.value.productId) {
      Message.error({ content: '请选择产品', duration: 5 * 1000 });
      return;
    }
    const item = { ...orderProduct.value };
    item.totalAmount = (item.broadbandRent + item.ipRent + item.cpeRent) * item.rentalMonths;
    orderProductList.value.push(item);
  };
  const removeOrder = (record: OrderProduct, rowIndex: number) => {
    if (rowIndex < 0) {
      Message.error({ content: '请选择要删除的订单', duration: 5 * 1000 });
      return;
    }
    orderProductList.value.splice(rowIndex, 1);
  };
  const modal = reactive({
    visible: false,
    loading: false,
    cd: 0,
    footer: '',
  });

  const loginFormRef = ref();
  const userStore = useUserStore();
  const handleOrderSave = async () => {
    try {
      modal.visible = false;
      const user = await userStore.current();
      if (!user || !user.id) {
        modal.visible = true;
      } else {
        orderTable.loading = true;
        const order: Order = {};
        order.userId = user.id;
        order.products = orderProductList.value;
        const protocol = await saveOrder(order);
        if (protocol.returncode === 0) {
          router.push({ path: `/order/detail/${protocol.result.id}` });
        }
        orderTable.loading = false;
      }
    } catch (ex) {
      Message.error('save order failed:', ex);
    }
  };
  const handleOrderCancel = () => {
    modal.visible = false;
    loginFormRef.value?.resetForm();
  };

  const handleModalOk = async () => {
    return loginFormRef.value?.handleLogin();
  };

  const handleLoginSuccess = (user: any) => {
    modal.visible = false;
    handleOrderSave();
  };

  const handleLoginFailed = (error: any) => {
    console.error('Login failed:', error);
  };
  // 显示advanced
  const toggleVisibility = () => {
    if (orderProduct.value) {
      orderProduct.value.advance = !orderProduct.value.advance;
    }
  };
</script>

<style scoped>
  .none-text {
    color: rgb(var(--gray-5));
    font-size: 14px;
  }
  .name-text {
    font-size: 16px;
    line-height: 30px;
    font-weight: 700;
  }
  .address-text {
    font-size: 14px;
    line-height: 26px;
    color: var(--color-text-2);
    display: flex;
    align-items: center;
    gap: 4px;
  }
  .modal-footer {
    text-align: center;
  }
  :deep(.arco-card-bordered) {
    border: 1px solid #e2dcdc;
    border-radius: 15px 15px 15px 15px;
    box-shadow: 0 0 60px 0 rgba(0, 0, 0, 0.1);
  }
  :deep(.arco-card-size-medium .arco-card-header-title) {
    font-size: 20px;
    font-weight: bold;
  }
  :deep(.arco-card-header) {
    height: 60px;
    background-color: #f1f1f1;
    border-radius: 15px 15px 0 0;
  }
  :deep(.arco-form-item-label-col > .arco-form-item-label) {
    font-size: 16px;
    font-weight: 700;
  }
  :deep(.arco-btn-size-medium) {
    min-height: 40px;
    padding: 12px 50px;
    border-radius: 30px;
    background-color: transparent;
    background-image: linear-gradient(90deg, #df0000 9%, #ffa74c 90%);
    font-weight: 500;
  }
  .btn {
    background: #f5f5f5;
    padding: 12px 40px;
    border-radius: 30px;
  }
  :deep(.checkbox .arco-checkbox-label) {
    color: #fff;
  }
  :deep(.arco-space) {
    width: 100%;
  }
  :deep(.arco-space-item) {
    position: relative;
    margin-bottom: 0;
  }
  :deep(.arco-tabs-content) {
    border-top: 0;
    padding-top: 0;
    border: 0;
  }
  :deep(.arco-tabs-type-card > .arco-tabs-content),
  .arco-tabs-type-card-gutter > .arco-tabs-content {
    border-top: 1px;
    padding-top: 0;
  }
  :deep(.arco-select-view-single.arco-select-view-size-medium .arco-select-view-input),
  .arco-select-view-single.arco-select-view-size-medium .arco-select-view-value {
    padding-top: 12px;
    padding-bottom: 12px;
  }
  :deep(.arco-select-view-single.arco-select-view-size-medium .arco-select-view-value) {
    padding-top: 12px;
    padding-bottom: 12px;
  }
  .number {
    font-size: 14px;
    color: #fff;
    background: #e55d47;
    border-radius: 50%;
    height: 40px;
    width: 40px;
    text-align: center;
    line-height: 40px;
    font-weight: 600;
    display: inline-block;
  }
  .wrapper {
    padding: 20px 40px 0px 0;
  }
  .wrapper_box {
    /* background: #f1f1f1; */
    padding: 0 20px;
  }
  :deep(.arco-checkbox-checked .arco-checkbox-icon) {
    background-color: #e55d47;
  }
  :deep(.arco-input-wrapper .arco-input.arco-input-size-medium) {
    padding-top: 12px;
    padding-bottom: 12px;
  }
  :deep(.arco-btn-secondary) {
    border-radius: 30px;
    padding: 12px 40px;
  }
</style>

<style>
  .self-model .arco-modal-footer {
    text-align: center;
  }
  .self-model .arco-btn-secondary {
    border-radius: 30px;
    padding: 15px 40px;
    font-size: 20px;
    font-weight: 700;
    min-height: 40px;
  }

  .self-model .arco-btn-primary {
    border-radius: 30px;
    padding: 15px 40px;
    background-color: transparent;
    background-image: linear-gradient(90deg, #df0000 9%, #ffa74c 90%);
    font-size: 20px;
    font-weight: 700;
    min-height: 40px;
  }

  .self-model .send {
    background-image: none;
    background-color: #f1f1f1;
    border-radius: 0;
    color: #333;
    font-weight: normal;
    font-size: 16px;
    height: 46px;
    margin-left: 10px;
  }
</style>
